import { BootstrapIcon, ValueAccessor } from "solid-fire-controls";
import { Component, JSX, ParentComponent, splitProps } from "solid-js";

export interface ShareLinkProps extends ValueAccessor<string>, JSX.AnchorHTMLAttributes<HTMLAnchorElement> {

}

const ShareLink: ParentComponent<ShareLinkProps> = (props) => {
  const [accessor, linkProps] = splitProps(props, ['value', 'onValueChanged', 'children'])

  return (
    <a {...linkProps} href={accessor.value} target="_blank" style={{'text-wrap': 'wrap', 'overflow-wrap': 'anywhere'}}>
      {accessor.children || accessor.value}
      <BootstrapIcon icon="link" classList={{'ms-1': true}}></BootstrapIcon>
    </a>
  );
};

export default ShareLink
